// 此组件是：收藏的课程中的课程列表 组件
// this.props.dataList 是接受的父组件 传过来的 数据，进行遍历

import React from 'react';
import {
    Text,
    View,
    StyleSheet,
    Image,
    FlatList,
    Platform,
    TouchableWithoutFeedback
} from 'react-native';
import Loading from '../common/Loading'
var Dimensions = require('Dimensions');
var { width,height } = Dimensions.get('window');
import {setSpText,setHW} from './ScreenUtil'

export default class MyCourseList extends React.Component {
    // 初始化模拟数据
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
            isRefreshing: false,//下拉控制 下拉刷新
        }
    }
    render() {
        return (
            <View style={styles.itemBox}>
             <FlatList
                        data={this.props.dataList}
                        extraData={this.props}
                        ListFooterComponent={this._renderFooter.bind(this)}
                        renderItem={({ item }) => this.renderItem(item)}
                        keyExtractor={(item, index) => index}
                    />
            </View>
        );
    }
    handleRefresh = () => {
        this.setState({
            isRefreshing: true
        });
        setTimeout(()=>{
            this.setState({
                isRefreshing: false
            })
        },3000)
    }
    _renderFooter() {
        if (this.state.showFoot === 1) {
            return (
                <View style={{ height: 30, alignItems: 'center', justifyContent: 'flex-start'}}>
                    <Text style={{ color: '#999999', fontSize:setSpText(28), marginTop: setHW(10), marginBottom: setHW(10)}}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.showFoot === 2) {
            return (
                <View style={styles.footer}>
                    <Loading />
                    <Text>正在加载更多数据...</Text>
                </View>
            );
        } else if (this.state.showFoot === 0) {
            return (
                <View style={styles.footer}>
                    <Text></Text>
                </View>
            );
        }
    }
    // 每一行课程
    renderItem(item) {
        return (
            <View style={{marginBottom:5}}>
                <TouchableWithoutFeedback onPress={() => this.goToPeriods(item)}>
                    <View style={styles.item} >
                        <View style={styles.itemLeft}>
                            <Image style={styles.teacherIcon} source={{ uri: item.PIC }} />
                        </View>
                        <View style={styles.itemRight}>
                            <View style={styles.title}>
                                <View style={styles.titleLeft}>
                                    {this.showTag(item)}
                                    <Text style={styles.titleText}>{this.MoreText(item.TITLE,8)}</Text>
                                </View>
                                {/* 我的课程 显示去学习，我的收藏 只展示钱 没有免费和购买不购买 */}
                                {this.goStudyOrMoney(item)}
                            </View>
                            <Text style={styles.teacherName}>授课老师：{this.MoreText(item.TEACHERNAME,4)}</Text>
                            <View style={styles.tagList}>
                                <View style={styles.tagsRadius}><Text style={styles.tags}>{item.GRADE}</Text></View>
                                <View style={styles.tagsRadius}><Text style={styles.tags}>{item.SUBJECTNAME}</Text></View>
                            </View>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
                {this.whereForm(item)}
            </View>)
    }
    goStudyOrMoney(item) {
        if (item.CHARGE) {//这个字段表示是收藏页面
            if (item.CHARGE == '0') {//收费
                return (
                    <View style={styles.moneyPrice}>
                        <Text style={styles.price}>¥</Text>
                        <Text style={styles.money}>{item.MONEY}.00</Text>
                    </View>
                )
            } else {
                return (
                    <View style={styles.moneyPrice}>
                        <Text style={styles.money}>免费</Text>
                    </View>
                )
            }
        } else {//我的课程页面
            return (
                <View style={[styles.moneyPrice,styles.radius]}>
                    <Text style={styles.study}>去学习</Text>
                </View>
            )
        }
    }
    //跳转购买后的页面 COURSE_ID是课程或课时id 购买的课程跳到课程页面 购买的课时 调到课时页面
    goToPeriods(item) {
        let that=this;
        if(item.TYPE=='0' || item.COURSE_TYPE == '0'){//课程类型:0课程,1课时
            this.props.navigation.navigate('DetailLesson', { 
                courseId: item.COURSE_ID,
                refreshPage: function () {
                    //去让父亲组件刷新
                    that.props.ResetSearch&&that.props.ResetSearch()
                }
            });
        }
        if (item.TYPE == '1' || item.COURSE_TYPE == '1'){//课程类型:0课程,1课时
            this.props.navigation.navigate('KeShiIndex', {
                id: item.COURSE_ID ,
                refreshPage: function () {
                    //去让父亲组件刷新
                    that.props.ResetSearch&&that.props.ResetSearch()
                }
            });
        }
    }
     //内容超出
    MoreText(text,MaxNum){
        if(text){
            if(text.length>MaxNum){
                return(
                    text.substring(0,MaxNum)+'...'
                )
            }else{
                return(
                    text
                )
            }
        }
    }
    // 来自的课程首页 && 非系列课有 本课来源 
    whereForm(item) {
        if (this.props.myCourseIndex && item.COURSE_TYPE !== '0') {
            if(item.STATE=='1'&&item.COURSESTATUS!=='2'){// 该课程没有被下架(展示的条件)
                return (
                    <View>
                        <View style={styles.line}></View>
                        <View style={styles.enterCourseBox}>
                            <View style={styles.enterCourse}>
                                <Text style={styles.text}>本课时来源于：{this.MoreText(item.UPTITLE,10)}</Text>
                                <View style={styles.enterRight}>
                                    <Text style={styles.enterText} onPress={() => this.enterCourse(item.FCOURSEID)}>进入该系列课</Text>
                                    <Image style={styles.enterCourseIcon} source={require('../assets/imgs/enter.png')} />
                                </View>
                            </View>
                        </View>
                    </View>
                )
            }else{//下架 不展示来源于
                return null
            }
        }
    }
    // 进入该系列课
    enterCourse(courseId) {
        let that=this;
        this.props.navigation.navigate('DetailLesson', {
            courseId: courseId,
            refreshPage: function () {
                //去让父亲组件刷新
                that.props.ResetSearch&&that.props.ResetSearch()
            }
        });
    }
    // 在我的课程首页 COURSE_TYPE	0表示是课程 展示系列课 在其他页面 TYPE	0表示是课程 展示系列课
    showTag(item) {
        if(item.COURSE_TYPE == '0'||item.TYPE == '0'){
            return ( 
                <View style={styles.tagNameRadius}>
                    <Text style={styles.tagName}>系列课</Text>
                </View>
            )
        }
    }
}
const styles = StyleSheet.create({
    moneyPrice: {
        flexDirection: 'row',
    },
    price: {
        color: '#FF8A00',
        fontSize:setSpText(26),
        paddingTop: setHW(6),
    },
    money: {
        color: '#FF8A00',
        fontSize:setSpText(30),
    },
    itemBox: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        backgroundColor: '#F7F7F9',
    },
    item: {
        padding: setHW(30),
        paddingLeft: setHW(16),
        paddingRight: setHW(16),
        flexDirection: 'row',
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
    },
    itemLeft: {
        width: setHW(220),
        marginRight: setHW(10),
    },
    teacherIcon: {
        width: setHW(220),
        height: setHW(146),
        resizeMode: 'cover'
    },
    itemRight: {
        width: width - setHW(262),
    },
    title: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: setHW(10),
    },
    titleLeft: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        height: setHW(36),
        alignItems:'center',
    },
    tagNameRadius:{
        backgroundColor: '#FF8A00',
        paddingLeft: setHW(6),
        paddingRight: setHW(6),
        borderRadius: setHW(10),
        marginRight: setHW(6),
        height: setHW(32),
        justifyContent:'center',
        alignItems:'center',
    },
    tagName: {
        color: '#fff',
        fontSize:setSpText(22),
    },
    titleText: {
        color: '#333',
        fontSize:setSpText(28),
        fontWeight: 'bold',
    },
    // 去学习按钮
    radius:{
        paddingLeft: setHW(20),
        paddingRight: setHW(20),
        borderRadius: setHW(24),
        backgroundColor: '#FF8A00',
        height:setHW(44),
        justifyContent:'center',
        alignItems:'center',
    },
    study: {
        fontSize:setSpText(24),
        color: '#fff',
    },
    teacherName: {
        fontSize:setSpText(26),
        color: '#333',
        marginBottom: setHW(20),
    },
    tagList: {
        flexDirection: 'row',
        justifyContent: 'flex-start'
    },
    tagsRadius:{
        height: setHW(36),
        justifyContent:'center',
        alignItems:'center',
        backgroundColor: '#F7F7F9',
        borderRadius: setHW(4),
        paddingLeft: setHW(4),
        paddingRight: setHW(4),
        marginRight: setHW(8),
    },
    tags: {
        color: '#999999',
        fontSize:setSpText(24),
    },
    line:{
        height:1,
        width:width,
        backgroundColor:'#EBEBEB',
    },
    enterCourseBox: {
        paddingLeft: setHW(16),
        paddingRight:setHW(16),
        backgroundColor: '#fff',
    },
    enterCourse: {
        backgroundColor: '#fff',
        height: setHW(80),
        flexDirection: 'row',
        alignItems:'center',
        justifyContent: 'space-between',
    },
    enterRight: {
        height: setHW(80),
        flexDirection: 'row',
        alignItems:'center',
        justifyContent: 'flex-start',
    },
    text: {
        color: "#999",
        fontSize:setSpText(24),
    },
    enterText: {
        color: '#666',
        textAlign: 'right',
        paddingRight: setHW(8),
        fontSize:setSpText(24),
    },
    enterCourseIcon: {
        width: setHW(14),
        height: setHW(20),
    }
});
